<template>
  <div class="wb-item-scroller">
    <img :src="selectUrl" class="bubble" @click.stop.prevent.self="onClickBubble">
    <img v-if="bubbleUrl" :src="bubbleUrl" class="bubble" :style="getBubbleStyle" @click.stop.prevent.self="onClickBubble">
  </div>
</template>
<script>
import { utils } from '@/components/utils/utils'
import { commonUtils } from '@/components/utils/common-utils'
import { ref } from 'vue'
import { getPxOVwByValue } from '@/store/utils'
import { EventBus } from '@/store/index'
import { isHasOwnProperty } from '@/plugins/utils'

export default {
  mixins: [utils, commonUtils],
  setup () {
    return {
      selectUrl: ref(''),
      bubbleUrl: ref(''),
      isSelected: false,
    }
  },
  props: ['qItem', 'selecteds'],
  created(){
    this.selecteds_ = this.selecteds;
    this.selectUrl = this.qItem.url
    if(this.commonAttr.bubbleUrl){
      this.bubbleUrl = this.commonAttr.bubbleUrl.split(',')[0];
    }
  },
  computed: {
    getBubbleStyle(){
      let bubbles = '';
      if(this.commonAttr.bubbleUrl){
        bubbles = this.commonAttr.bubbleUrl.split(',');
      }
      let style = {}
      if(this.qItem.selectUrl) {
        style = {
          top: '50%',
          transform: 'translate(-50%,-50%)'
        }
      }
      return {
        width: getPxOVwByValue(bubbles[1]),
        height: getPxOVwByValue(bubbles[2]),
        left: '50%',
        transform: 'translateX(-50%)',
        ...style
      }
    },

  },
  methods: {
    onClickBubble(e){
      let isSend = false
      if(!this.isSelected){
        isSend = true
        if(!this.onIsOverRange()) return
        this.bubbleUrl = this.commonAttr.effectUrl;
        window.setTimeout(() => {
          this.bubbleUrl = '';
        }, 500);
        if(this.qItem.selectUrl){
          this.selectUrl = this.qItem.selectUrl
        }
        this.selecteds_.push(this.index);
        this.isSelected = true;
      }else{
        if(this.commonAttr.isUnSelect){
          isSend = true
          this.initBubble()
        }
      }
      if(isSend){
        this.$store.commit('updateFormValue', {id: this.item.id, selecteds: this.selecteds_, lists: this.item.lists})
        let num = this.selecteds_.length;
        if(num < 10){
          num = '0' + num;
        }
        this.$store.commit('updateBindData', {key: 'num', value: num})

        let jumpUrl = 'click-bubble-' + this.index;
        let comType = "click"
        let wModule = "jump"
        this.onPostStatics(e, { comType, wModule,  jumpUrl })
      }
    },
    initBubble(){
      this.selectUrl = this.qItem.url
      if(this.commonAttr.bubbleUrl){
        this.bubbleUrl = this.commonAttr.bubbleUrl.split(',')[0];
      }
      let index = this.selecteds_.indexOf(this.index)
      this.selecteds_.splice(index,1)
      this.isSelected = false
    },
    onIsOverRange(){
      let event =  this.item.events
      if( event && event.compareInComps){
        let obj = JSON.parse(event.compareInComps.comps[0].attrs.value)
        let max = obj.max
        if(isHasOwnProperty(obj, "max") && this.selecteds_.length >= max){
          EventBus.$emit("itemClick", {id: this.item.id});
          return false
        }
      }
      return true
    }
  }
};
</script>
<style lang="scss">
.wb-item-scroller{
  height: 100%;
  position: relative;
  .bubble{
    background-size: contain;
  }
}
</style>

